<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Header from '@/components/layout/Header.vue';
import Footer from '@/components/layout/Footer.vue';
import Input from '@/components/common/Input.vue';
import { ElScrollbar } from 'element-plus';
import { selectHelpCenterForPc, list, systemNoticeList } from '@/apis/sysconf'
import { HelpCenterItem, NoticeItem } from '@/interfaces/sysconf';

const beginnerSGuideList = ref<HelpCenterItem[]>([])
const industryNewsList = ref<HelpCenterItem[]>([])
const announcementInformationList = ref<NoticeItem[]>([])
const showBeginnerSGuide = ref(false)
const showIndustryNews = ref(false)
const showAnnouncementInformation = ref(false)

onMounted(async () => {
    beginnerSGuideList.value = await selectHelpCenterForPc()
    industryNewsList.value = await list({ type: '' })
    announcementInformationList.value = (await systemNoticeList({ pageNo: 1, pageSize: 1000 })).rows
})

</script>

<template>
    <div>
        <Header />
        <div class="bg-[#fafafa] dark:bg-[#0b0e11] py-[80px] flex flex-col justify-center items-center">
            <div class="text-[16px] font-bold sm:text-[32px]">欢迎访问</div>
            <div class="text-[24px] font-bold sm:text-[56px] relative mt-[30px] sm:mt-[0]">UHX帮助中心
                <div class=" absolute sm:top-[-32px] sm:right-[-55px] right-[-16px] top-[-16px]">
                    <svg class="icon sm:text-[56px] text-[20px]" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                </div>
            </div>
            <div class="mx-[15px] w-[calc(100%-30px)] flex justify-center">
                <Input
                    class="w-[full] mt-[40px] sm:w-[520px] text-[12px] sm:text-[16px] sm:mt-[20px] !h-[40px] sm:!leading-[56px] sm:!h-[56px] !leading-[40px] "
                    placeholder="搜索或提问" />
            </div>
        </div>
        <div class="px-[16px] sm:px-[24px]  max-w-[1248px]  mx-auto">
            <div class="sm:py-[40px] py-[15px]">
                <div class="sm:text-[32px] text-[16px] font-bold">自助服务</div>
                <div class="sm:flex hidden gap-[10px] mt-[40px]">
                    <div
                        class="w-1/4 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-zhanghurenzhengqianshu text-[24px]"></div>
                        <div class="text-[14px] font-bold">重置身份认证</div>
                        <div class="text-[12px] text-[#9c9c9c]">身份认证更新。</div>
                    </div>
                    <div
                        class="w-1/4 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-zhongzhimima text-[26px]"></div>
                        <div class="text-[14px] font-bold">重置密码</div>
                        <div class="text-[12px] text-[#9c9c9c]">更改密码。</div>
                    </div>
                    <div
                        class="w-1/4 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-youxiang text-[22px]"></div>
                        <div class="text-[14px] font-bold">更改邮箱</div>
                        <div class="text-[12px] text-[#9c9c9c]">更新邮箱。</div>
                    </div>
                    <div
                        class="w-1/4 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-gugeyanzheng text-[26px]"></div>
                        <div class="text-[14px] font-bold">重置2FA验证</div>
                        <div class="text-[12px] text-[#9c9c9c]">重置谷歌验证器。</div>
                    </div>
                </div>
                <div class="flex sm:hidden gap-[10px] mt-[15px]">
                    <div
                        class="w-1/2 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-zhanghurenzhengqianshu text-[16px]"></div>
                        <div class="text-[14px] font-bold">重置身份认证</div>
                        <div class="text-[12px] text-[#9c9c9c]">身份认证更新。</div>
                    </div>
                    <div
                        class="w-1/2 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-zhongzhimima text-[18px]"></div>
                        <div class="text-[14px] font-bold">重置密码</div>
                        <div class="text-[12px] text-[#9c9c9c]">更改密码。</div>
                    </div>
                </div>
                <div class="flex sm:hidden gap-[10px] mt-[10px]">
                    <div
                        class="w-1/2 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-youxiang text-[14px]"></div>
                        <div class="text-[14px] font-bold">更改邮箱</div>
                        <div class="text-[12px] text-[#9c9c9c]">更新邮箱。</div>
                    </div>
                    <div
                        class="w-1/2 cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] h-[108px] box-border p-[15px] rounded-[12px] border-solid border-[1px] flex flex-col justify-between border-[#dddddd]">
                        <div class="iconfont icon-gugeyanzheng text-[18px]"></div>
                        <div class="text-[14px] font-bold">重置2FA验证</div>
                        <div class="text-[12px] text-[#9c9c9c]">重置谷歌验证器。</div>
                    </div>
                </div>
                <div class="sm:text-[32px] text-[16px] font-bold py-[15px] sm:py-[40px]">常见问题</div>
                <div class="hidden sm:flex gap-[24px]">
                    <div class="w-1/2 flex flex-col h-[758px] gap-[10px]">
                        <div id="beginnerSGuide"
                            class="h-1/2 box-border p-[24px] pb-[15px] border-solid border-[1px] cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] border-[#dddddd] rounded-[20px]">
                            <div
                                class="pb-[24px] text-[20px] font-bold border-solid border-0 border-b-[1px] border-[#ddd] dark:border-[#434c5a] flex  items-center">
                                <span class="iconfont icon-guanxiaobaotubiao39 text-[20px]"></span>
                                <div class="ml-[10px]">新手指南</div>
                            </div>
                            <ElScrollbar height="270px">
                                <div v-for="item, i in beginnerSGuideList" :key="i"
                                    class="h-[54px] flex items-center hover:bg-[#fafafa] rounded-[12px] dark:hover:bg-[#29313d] px-[16px]">
                                    <div>{{ i + 1 }}</div>
                                    <div class="ml-[10px]">{{ item.title }}</div>
                                </div>
                            </ElScrollbar>
                        </div>
                        <div id="industryNews"
                            class="h-1/2 box-border p-[24px] pb-[15px] border-solid border-[1px] cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] border-[#dddddd] rounded-[20px]">
                            <div
                                class="pb-[24px] text-[20px] font-bold border-solid border-0 border-b-[1px] border-[#ddd] dark:border-[#434c5a] flex items-center">
                                <span class="iconfont icon-hangyezixun text-[20px]"></span>
                                <div class="ml-[10px] ">行业资讯</div>
                            </div>
                            <ElScrollbar height="270px">
                                <div v-for="item, i in industryNewsList" :key="i"
                                    class="h-[54px] flex items-center hover:bg-[#fafafa] rounded-[12px] dark:hover:bg-[#29313d] px-[16px]">
                                    <div>{{ i + 1 }}</div>
                                    <div class="ml-[10px]">{{ item.title }}</div>
                                </div>
                            </ElScrollbar>
                        </div>
                    </div>
                    <div id="announcementInformation"
                        class="w-1/2 box-border p-[24px] pb-[15px] border-solid border-[1px] cursor-pointer dark:border-[#434c5a] dark:hover:border-[#707a8a] hover:border-[#9c9c9c] border-[#dddddd] rounded-[20px]">
                        <div
                            class="pb-[24px] text-[20px] font-bold border-solid border-0 border-b-[1px] border-[#ddd] dark:border-[#434c5a] flex items-center">
                            <span class="iconfont icon-gonggaoxinxi text-[20px]"></span>
                            <div class="ml-[10px] ">公告信息</div>
                        </div>
                        <ElScrollbar height="664px">
                            <div v-for="item, i in announcementInformationList" :key="i"
                                class="h-[54px] flex items-center hover:bg-[#fafafa] rounded-[12px] dark:hover:bg-[#29313d] px-[16px]">
                                <div>{{ i + 1 }}</div>
                                <div class="ml-[10px]">{{ item.title }}</div>
                            </div>
                        </ElScrollbar>
                    </div>
                </div>
                <div class="block sm:hidden">
                    <div id="announcementInformation"
                        class="box-border px-[15px] py-[15px] border-solid border-[1px] cursor-pointer dark:border-[#434c5a] border-[#dddddd] rounded-[16px]">
                        <div @click="showBeginnerSGuide = !showBeginnerSGuide"
                            class="text-[16px] font-bold flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="iconfont icon-guanxiaobaotubiao39 text-[20px]"></span>
                                <div class="ml-[10px] ">新手指南</div>
                            </div>
                        </div>
                        <div v-show="showBeginnerSGuide"
                            class="mt-[16px] mb-[10px] border-solid border-0 border-b-[1px] border-[#ddd] dark:border-[#434c5a]">
                        </div>
                        <div v-show="showBeginnerSGuide" v-for="item, i in beginnerSGuideList" :key="i"
                            class="h-[40px] flex items-center px-[8px]  text-[14px] rounded-[12px] ">
                            <div>{{ i + 1 }}</div>
                            <div class="ml-[10px]">{{ item.title }}</div>
                        </div>
                    </div>
                    <div id="announcementInformation"
                        class="box-border mt-[16px] px-[15px] py-[15px] border-solid border-[1px] cursor-pointer dark:border-[#434c5a] border-[#dddddd] rounded-[16px]">
                        <div @click="showIndustryNews = !showIndustryNews"
                            class="text-[16px] font-bold flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="iconfont icon-hangyezixun text-[20px]"></span>
                                <div class="ml-[10px] ">行业资讯</div>
                            </div>
                        </div>
                        <div v-show="showIndustryNews"
                            class="mt-[16px] mb-[10px] border-solid border-0 border-b-[1px] border-[#ddd] dark:border-[#434c5a]">
                        </div>
                        <div v-show="showIndustryNews" v-for="item, i in industryNewsList" :key="i"
                            class="h-[40px] flex items-center px-[8px]  text-[14px] rounded-[12px] ">
                            <div>{{ i + 1 }}</div>
                            <div class="ml-[10px]">{{ item.title }}</div>
                        </div>
                    </div>
                    <div id="announcementInformation"
                        class="box-border mt-[16px] px-[15px] py-[15px] border-solid border-[1px] cursor-pointer dark:border-[#434c5a] border-[#dddddd] rounded-[16px]">
                        <div @click="showAnnouncementInformation = !showAnnouncementInformation"
                            class="text-[16px] font-bold flex items-center justify-between">
                            <div class="flex items-center">
                                <span class="iconfont icon-gonggaoxinxi text-[20px]"></span>
                                <div class="ml-[10px] ">公告信息</div>
                            </div>
                        </div>
                        <div v-show="showAnnouncementInformation"
                            class="mt-[16px] mb-[10px] border-solid border-0 border-b-[1px] border-[#ddd] dark:border-[#434c5a]">
                        </div>
                        <div v-show="showAnnouncementInformation" v-for="item, i in announcementInformationList"
                            :key="i" class="h-[40px] flex items-center px-[8px]  text-[14px] rounded-[12px] ">
                            <div>{{ i + 1 }}</div>
                            <div class="ml-[10px]">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer />
    </div>
</template>

<style scoped></style>